<script lang="ts">
import { defineComponent } from 'vue'
import ShikiStyle from '../../components/shiki_style.vue'

import SlimSelect from '@/slim-select'

export default defineComponent({
  name: 'ContentLocation',
  mounted() {
    new SlimSelect({
      select: this.$refs.contentLocation as HTMLSelectElement,
      settings: {
        contentPosition: 'relative',
        contentLocation: this.$refs.local as HTMLElement
      }
    })
  },
  components: {
    ShikiStyle
  }
})
</script>

<style lang="scss">
#contentLocation {
  .content-location-select.ss-main {
    height: 40px;
  }
  .content-location-content {
    height: 150px;
  }
}
</style>

<template>
  <div id="contentLocation" class="content">
    <h2 class="header">contentLocation</h2>
    <p>
      The contentLocation setting allows you to specify where the dropdown content (search input and options) should be
      rendered in the DOM. By default, SlimSelect appends the content to the document body, but you can redirect it to
      any container element.
    </p>
    <p>
      This is particularly useful for maintaining proper z-index layering, avoiding overflow issues, or ensuring the
      dropdown appears within a specific container. The content container includes the search input field and all
      available options, giving you control over where this interactive area appears.
    </p>

    <div class="row">
      <select class="content-location-select" ref="contentLocation" style="width: 50%">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
      </select>
      <div class="content-location-content" ref="local"></div>
    </div>

    <ShikiStyle language="javascript">
      <pre>
        new SlimSelect({
          select: '#selectElement',
          settings: {
            // If you would like to set the location 
            // of the content not under the main bar
            contentPosition: 'relative', 
            contentLocation: document.getElementById('local')
          }
        })
      </pre>
    </ShikiStyle>

    <ShikiStyle language="html">
      <pre>
        &lt;select id="contentLocation"&gt;
          &lt;option value="value1"&gt;Value 1&lt;/option&gt;
          &lt;option value="value2"&gt;Value 2&lt;/option&gt;
          &lt;option value="value3"&gt;Value 3&lt;/option&gt;
        &lt;/select&gt;

        &lt;!-- The content will go in this div --&gt;
        &lt;div id="local"&gt;&lt;/div&gt;
      </pre>
    </ShikiStyle>
  </div>
</template>
